import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import emitter from '@/events';
import Cookies from 'js-cookie';
import { replaceImageUrl } from '@/utils';
// css
import styles from '@/styles/CommonPersonal.module.scss';
// component
import PayModal from '@/pages_components/pay/PayModal';
import Spin from '@/components/Spin';
// api
import { orderPayH5 } from '@/api/order';
import { message } from 'antd';

const OrderItem = ({ data = {}, status }) => {

  const router = useRouter();

  const [target, setTarget] = useState('/');

  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [orderId, setOrderId] = useState('');
  const [codeUrl, setCodeUrl] = useState('');

  // 10 待付款   20 待使用   60 待评价  70 已取消
  const { goodsName, orderStatus } = data;

  useEffect(() => {
    orderType(data.goodsType, goodsName, data.goodsId);
  }, [])

  // 订单状态
  function orderState (status, type, isComment){
    if(status === 10) return '待支付';
    if(status === 11){
      if(type == 1 || type == 2 || type == 4) return '待出票';
      if(type == 7) return '待出单';
      if(type == 3 || type == 5) return '待确认';
    }
    if(status === 20){
      if(type == 1 || type == 2 || type == 4 || type == 5 || type == 7) return '待使用';
      if(type == 3) return '待入住';
    }
    if(status === 21) return '待取票';
    if(status === 31) return '部分使用';
    if(status === 40) {
      if(type == 1 || type == 2 || type == 4 || type == 5 || type == 7) return '已使用';
      if(type == 3) return '已入住';
    }
    if(status === 50) return '退款完成';
    if(status === 51) return '退款审核中';
    if(status === 52) return '退款中';
    if(status === 60) {
      if(isComment == 0) return '待评价';
      return '已完成';
    }
    if(status === 70) return '已取消';
  }

  // 判断订单类型 
  function orderType(goodsType, goodsName, goodsId) {
    let path = "/";
    if (goodsType == 1) {
      path = "/ticket/"+goodsId+".html";
    } else if (goodsType == 2) {
      if(goodsName.indexOf('车') >= 0){
        path = "/car/"+goodsId+".html";
      }else{
        path = "/line/"+goodsId+".html";
      }
    } else if (goodsType == 3) {
      path = "/hotel/"+goodsId+".html";
    }
    setTarget(path)
  }

  // 立即支付
  function goPay(oid) {
    setLoading(true);
    orderPayH5(oid).then(result => {
      let { data } = result;
      if(data.code_url){
        setOrderId(oid);
        setCodeUrl(data.code_url);
        setVisible(true);
      }else{
        message.error('该订单只能在手机上进行支付');
      }
      setLoading(false);
    })
  }

  // 再次预订
  function goBuy() {
    router.replace(target)
  }
  // 查看详情  
  function showDetail(orderId) {
    // 详情弹出窗
    emitter.emit('openDetail', {
      open: true,
      orderId: orderId
    })
  }
  // 评价
  function goComment(orderId, name) {
    Cookies.set('comment_goodsName', name);
    router.push('/personal/comment?orderId='+orderId);
  }

  return (
    <>
      <div className={[styles["item"], status.length > 10 ? styles['all'] : ''].join(' ')}>
        <img onClick={() => { goBuy() }} src={replaceImageUrl(data.thumbnail)} alt="" />
        {
          status.length > 10 && <div className={styles['item-status']}>{orderState(data.orderStatus, data.goodsType, data.isComment)}</div>
        }
        <div className={styles["item-cnt"]}>
          <h3 onClick={() => { goBuy() }}>{goodsName}</h3>
          <p>{data.skuName}</p>
          <p>订单编号：{data.orderNo}</p>
          <p>使用时间：{data.useDate}</p>
        </div>
        <div className={styles["item-bottom"]}>
          订单金额：<span>￥</span>
          <em>{data.realPay}</em>
          <button onClick={() => { showDetail(data.orderId) }}>查看订单</button>
          {
            (orderStatus === 60 && data.isComment == 0)
            && <button onClick={() => { goComment(data.orderId, goodsName) }}>立即评价</button>
          }
          {
            orderStatus === 10
            && <button className={styles["pay"]} onClick={() => { goPay(data.orderId) }}>立即支付</button>
          }
          {
            (orderStatus === 60 || orderStatus === 70) 
            && <button onClick={() => { goBuy() }}>再次预订</button> 
          }
        </div>
        <div className={styles["item-num"]}>x{data.quantity}</div>
      </div>
      {
        orderStatus === 10 && <Spin loading={loading} />
      }
      {
        orderStatus === 10 && <PayModal visible={visible} setVisible={setVisible} orderId={orderId} codeUrl={codeUrl} target={target} />
      }
    </>
  );
};

export default OrderItem
